<template>
  <div class="sound-play-collection">
    <h1>「了不起」系列声音剧合集</h1>
    <!-- 立减100元 -->
    <div class="immediately">
      <div class="lose">立减100元</div>
      <div class="compilations">
        <div class="pictures-title">
          <div class="img-title">
            <img src="@/assets/images/声音剧/syj-7@2x.png" alt="" />
            <p class="title">了不起的女子</p>
            <p class="title">中外成功女性的锦囊</p>
          </div>
          <div class="add">+</div>
          <div class="img-title">
            <img src="@/assets/images/声音剧/syj-8@2x.png" alt="" />
            <p class="title">《苏东坡》声音剧</p>
            <p class="title">樊登客串，吴磊演播</p>
          </div>
        </div>
        <!-- 一键购买 -->
        <div class="buy">
          <!-- 原价/现价 -->
          <p>
            <span>原价¥236</span>
            <span>¥136</span>
          </p>
          <!-- 一键购买 -->
          <button>一键购买</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.sound-play-collection {
  font-family: PingFang SC;
  font-weight: bold;
  h1 {
    font-size: 20px;
    color: #333333;
    margin-bottom: 14px;
  }
  // 立减100元
  .immediately {
    background: #ffffff;
    box-shadow: 0px 0px 13px 0px rgba(251, 248, 231, 0.33);
    border-radius: 11px;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 23px;
    .lose {
      width: 76px;
      height: 21px;
      background: linear-gradient(-90deg, #fa6421 0%, #fd9740 100%);
      border-radius: 11px 0px 10px 0px;
      font-size: 12px;
      color: #ffffff;
      position: absolute;
      left: 0;
      top: 0;
      margin-bottom: 8px;
      text-align: center;
      line-height: 21px;
    }
    .compilations {
      width: 285px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      .pictures-title {
        margin-top: 28px;
        margin-bottom: 21px;
        display: flex;
        justify-content: space-between;
        .img-title {
          text-align: center;
          img {
            width: 85px;
            height: 113px;
            margin-bottom: 7px;
          }
          .title {
            font-size: 12px;
            color: #333333;
            margin-bottom: 6px;
            text-align: center;
          }
        }
        .add {
          color: #fed92c;
          line-height: 112px;
          font-size: 24px;
        }
      }
      // 一键购买
      .buy {
        height: 40px;
        width: 285px;
        background: #fff9da;
        border-radius: 20px;
        position: relative;
        display: flex;
        align-items: center;
        padding-left: 20px;
        // 原价/现价
        p {
          font-size: 16px;
          color: #fa6120;
          display: flex;
          align-items: center;
          span {
            &:first-of-type {
              font-size: 10px;
              color: #999999;
              text-decoration: line-through;
              margin-right: 10px;
            }
          }
        }
        // 一键购买
        button {
          position: absolute;
          right: 0;
          top: -2px;
          font-weight: bold;
          outline: none;
          border: none;
          width: 150px;
          height: 44px;
          background: linear-gradient(-90deg, #fdd20b 0%, #ffe466 100%);
          border-radius: 22px;
          line-height: 44px;
          text-align: center;
          font-size: 16px;
          color: #333333;
        }
      }
    }
  }
}
</style>
